<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    @@include('../components/script.html')
    <style>
        body {
            background-color: #fff;
            padding: 0;
        }

        .bg {
            position: relative;
            width: 100%;
            height: 650px;
            background: url("//b.appsimg.com/upload/momin/2020/12/14/15/1607915393371.jpg") center left no-repeat;
            background-color: #FAA8AC;
            background-size: 110%;
        }

        .bg .signin {
            position: absolute;
            top: 80px;
            right: 50px;
            width: 28%;
            padding: 30px;
            background: #fff;
            z-index: 10;
            box-sizing: border-box;
        }

        .signin .title {
            width: 100%;
            height: 35px;
            line-height: 35px;
            font-size: 23px;
            color: #f10180;
            font-weight: bolder;
            margin-bottom: 25px;
        }

        .signin p {
            width: 95%;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #999999;
        }
        .signin p span:hover, .signin p a:hover{
            cursor: pointer;
            color: #fa2a83 !important;
            text-decoration: underline;
        }

        .inputview {
            width: 90%;
            height: 35px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            padding: 3px 5px;
            margin-top: 15px;
            margin-left: 0;
        }

        .inputview > input {
            flex-grow: 1;
            font-size: 15px;
            height: 80%;
            border: none;
            margin-left: 5px;
        }

        .login {
            width: 95%;
            margin: 0px auto;
            margin-top: 50px;
            margin-bottom: 30px;
            text-align: center;
            height: 42px;
            line-height: 42px;
            font-size: 18px;
            font-weight: bolder;
            color: #fff;
            background-color: #fa2a83;
        }

        .login:hover {
            background-color: #fa2a8390;
            cursor: pointer;
        }

        footer {
            width: 100%;
            height: 100px;
            text-align: center;
            line-height: 100px;
            color: #909399;
            font-size: 12px;
        }
    </style>
</head>
<body>
@@include('../components/simplehead.html')
<div class="bg">
    <form name="signup">
        <div class="signin">
            <div class="title">注册账号</div>
            <div class="inputview">
                <img src="./static/icon-username.png" width="18"/>
                <input name="username" autocomplete="off" placeholder="请输入用户名">
            </div>
            <div class="inputview">
                <img src="./static/icon-password.png" width="18"/>
                <input name="password" type="password" placeholder="请输入密码">
            </div>
            <div class="inputview">
                <img src="./static/icon-password.png" width="18"/>
                <input name="repassword" type="password" placeholder="请确认密码">
            </div>
            <p style="margin-top: 15px"><span style="float: left">找回密码</span><span style="float: right"><a style="color: #999999" href="./login.html">立即登录</a></span></p>
            <button name="login" class="login" type="button">注册</button>
        </div>
    </form>
</div>
<script>
    var msgs = new Messgebox()
    msgs.show({
        type:"success",
        msg: '请注册',
    })
    $('.login').on('click', () => {
        var msg = new Messgebox()
        let { username, password, repassword } = signup
        if (username.value === '') {
            msg.show({
                msg: '用户名不得为空！',
            })
        } else if (password.value === '') {
            msg.show({
                msg: '密码不得为空',
            })
        } else if (repassword.value === '') {
            msg.show({
                msg: '请确认密码',
            })
        } else if (repassword.value !== password.value) {
            msg.show({
                msg: '两次输入密码不一致！',
            })
        } else {
            let user={
                name:"",
                password:""
            }
            user.name=username.value
            user.password=password.value
            let userlist=localStorage.getItem("users")
            if(userlist==null){
                localStorage.setItem("users",JSON.stringify([user]))
            }else {
                let norepeat=false
                userlist=JSON.parse(userlist)
                userlist.forEach((item)=>{
                    if(item.name===username.value){
                        norepeat=true
                        msg.show({
                            type:'error',
                            msg: '用户已经存在',
                        })
                        return;
                    }
                })
                if(!norepeat){
                    console.log("注册成功")
                    userlist.push(user)
                    localStorage.setItem("users",JSON.stringify(userlist))
                    msg.show({
                        type:'success',
                        msg: '注册成功',
                    })
                    setTimeout(()=>{
                        location.href="./login.html"
                    },1200)
                }
            }
        }
    })
</script>
<footer>
    Copyright 2008-2020 vip.com, All Rights Reserved ICP证:粤B2-20080329
</footer>
</body>
</html>